<template>
    <div>
        <div class="tfjlcx">
            <el-form size="mini" :inline="true" :model='search' ref="search_data" class="demo-form-inline search-form">
                    <el-form-item label="投放状态" prop="adPlaceId">
                        <el-radio-group v-model="search.onlineStatus">
                            <el-radio :label="1">投放中</el-radio>
                            <el-radio :label="4">投放结束</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label=" " ></el-form-item>
                    <el-form-item label=" " ></el-form-item>
                    <el-form-item label=" " ></el-form-item>
                    <el-form-item label="广告商" prop="merchantName">
                        <el-input v-model="search.merchantName" placeholder="请输入广告位名称"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" plain  icon="el-icon-search" @click="doSearch">搜索</el-button>
                        <el-button icon="el-icon-refresh-right" @click="resetForm('search_data')">重置</el-button>
                    </el-form-item>
                </el-form> 
        </div>
        <my-table :loading="loading" :lists="tableData" @pageChange="handleChange" :sequence="true" :page='page'>     
            <el-table-column property="adPlaceMerchantName" label="广告商" align='center'></el-table-column>
            <el-table-column property="" label="保证金" align='center'>
                <template slot-scope="scope">
                    {{scope.row.deposit?scope.row.deposit.decimalTwoString:'--'}}
                </template>
            </el-table-column>
            <el-table-column property="adDays" label="投放周期" align='center'></el-table-column>
            <el-table-column property="" label="单次UV点击付费" align='center'>
                <template slot-scope="scope">
                    <span v-if="scope.row.uvPrice">{{scope.row.uvPrice.decimalFourString}}</span>
                </template>
            </el-table-column>
            <el-table-column property="" label="日奖励限额" align='center'>
                <template slot-scope="scope">
                    <span v-if="scope.row.dayTotalPrice">{{scope.row.dayTotalPrice.decimalFourString}}</span>
                </template>
            </el-table-column>
            <el-table-column property="" label="投放奖励总金额" align='center'>
                <template slot-scope="scope">
                    <span v-if="scope.row.allTotalPrice">{{scope.row.allTotalPrice.decimalFourString}}</span>
                </template>
            </el-table-column>
            <el-table-column property="createTime" label="投放时间" align='center'></el-table-column>
            <el-table-column property="" label="投放状态" align='center'>
                <!---1-上线中；2-当日奖励用完；3-总金额用完；4-投放到期；5：裁定违规；6：主动下线-->
                <template slot-scope="scope">
                    <span v-if="scope.row.onlineStatus==1">上线中</span>
                    <span v-else-if="scope.row.onlineStatus==2">当日奖励用完</span>
                    <span v-else-if="scope.row.onlineStatus==3">总金额用完</span>
                    <span v-else-if="scope.row.onlineStatus==4">投放到期</span>
                    <span v-else-if="scope.row.onlineStatus==5">裁定违规</span>
                    <span v-else-if="scope.row.onlineStatus==6">主动下线</span>
                </template>
            </el-table-column>

        </my-table>
    </div>
</template>
<script>
import {
    get_ads_release_record
} from '@/api/collext'
import myTable from '@/components/public/myTable';
export default {
    props:{
        adPlaceId:''
    },
    components:{
        myTable
    },
    data(){
        return{
            search:{
                onlineStatus:'',
                merchantName:'',
            },
            loading:false,
            tableData:[],
            multipleSelectionIds:[],
            page:{
                pageSize:10,
                pageIndex:1,
                total:0,
            },
        }
    },
    created(){
        this.getList()
    },
    methods:{
        getList(){ 
            this.loading = true
            get_ads_release_record({
                adPlaceId:this.adPlaceId,
                limit: this.page.pageSize,
                page: this.page.pageIndex,
                ...this.search
            }).then(res=>{
                this.loading = false
                this.tableData = res.data
                this.page.total = res.total
            })
        },
        doSearch(){
            this.pageIndex = 1
            this.getList()
        },
        handleChange(index) {
            this.page.pageIndex = index;
            this.getList();
        },
        resetForm(){
            this.search.onlineStatus = ''
            this.search.merchantName = ''
            this.doSearch()
        }
    }
}
</script>
<style lang="scss" scoped>
    .tfjlcx{
        display: flex;
        border: 1px solid #eee;
        margin: 0 0 2px 0;
        padding: 10px 20px;
        height: 50px;
    }
</style>